<template>
	<view style="background-color: #EFEFEF;width: 750rpx;height: 100vh;overflow: auto;">
		<u-toast ref="uToast" />
		<u-form :model="formData" ref="uForm">
		<view class="form_box">
			
			<view class="form_item">
				
				<!-- <view class="form_label">手机号码</view> -->
				<u-form-item label="　账号呢称" label-width="200rpx" prop="u_nickname">
				<view class="form_input">
					<u-input v-model="formData.u_nickname" placeholder="请输入您的呢称"/>
				</view>
				</u-form-item>
				
			</view>
			
			<view class="form_item">
				
				<!-- <view class="form_label">手机号码</view> -->
				<u-form-item label="　手机号码" label-width="200rpx" prop="u_tel">
				<view class="form_input">
					<u-input v-model="formData.u_tel" placeholder="请输入您的手机号"/>
				</view>
				</u-form-item>
				
			</view>
			
			<view class="form_item">
				<u-form-item label="　密　　码" label-width="200rpx" prop="u_password">
				<view class="form_input">
					<u-input v-model="formData.u_password" type="password" placeholder="请输入9-16位字母或数字"/>
				</view>
				</u-form-item>
			</view>
			
			<view class="form_item">
				
				<u-form-item label="　确认密码" label-width="200rpx">
				<view class="form_input">
					<u-input type="password" v-model="formData.u_re_password" placeholder="请再次输入您的密码"/>
				</view>
				</u-form-item>
			</view>
			
			<view class="form_item">
				
				<u-form-item label="　邀请码　" label-width="200rpx">
				<view class="form_input">
					<u-input v-model="formData.u_invite_code" placeholder="请输入您的邀请码（选填）"/>
				</view>
				</u-form-item>
			</view>
			
			<view class="form_item">
				
				<u-form-item label="　验证码　" label-width="200rpx" prop="u_short_code">
				<view class="form_input">
					<u-input v-model="formData.u_short_code" placeholder="请输入您的验证码"/>
					<view class="butt" @click="onGet_code" v-if="s==0">获取验证码</view>
					<view v-if="s>0" class="butt">({{s}})</view>
				</view>
				</u-form-item>
			</view>
			
		</view>
		
		<view style="margin-top: 20rpx;width:670rpx;margin-left: 40rpx;">
			<!-- 非小程序注册 -->
			<u-button @click="submit" style="background-color: #EA4389;"  type="error">提交</u-button>
				
			<!-- 微信小程序注册 -->
			<!-- <button @getuserinfo="wxsubmit"	style="background-color: #EA4389;color:#fff;" open-type="getUserInfo" type="error">提交</button> -->
		</view>
		
		</u-form>
		
	</view>
</template>

<script>
	export default {
		data(){
			return {
				formData:{
					u_nickname:'',
					u_tel:'',
					u_password:'',
					u_re_password:'',
					u_invite_code:'',
					u_short_code:'',
					u_sex:1
				},
				rules:{
					u_nickname:[
						{
							required: true,
							message: '请输入账号名称',
							// 可以单个或者同时写两个触发验证方式
							trigger: 'blur,change'
						},
						{
							min:2,
							max:6,
							message: '请输入2-6个字符的名称',
							trigger: 'blur,change'
						}
					],
					u_tel:[
						{
							required: true,
							message: '请输入手机号',
							// 可以单个或者同时写两个触发验证方式
							trigger: 'blur,change'
						},
						{
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// this.$u.test.mobile()就是返回true或者false的
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							trigger: ['change','blur'],
						}
					],
					u_password:[
						{
							required: true,
							message: '请输入密码',
							// 可以单个或者同时写两个触发验证方式
							trigger: 'blur,change'
						},
						{
							min:9,
							max:16,
							message: '请输入9-16个字符的密码',
							trigger: 'blur,change'
						}
					],
					u_short_code:[
						{
							required: true,
							message: '请输入验证码',
							// 可以单个或者同时写两个触发验证方式
							trigger: 'blur,change'
						}
					]
				},
				s:0
			}
		},
		methods:{
			wxsubmit(){
				let that = this
				uni.getUserInfo({
					provider: 'weixin',
					success(res){
									
						
						let info=res.userInfo
													
						that.formData.avatarUrl = info.avatarUrl
						
						that.formData.sex = info.gender
						
						that.formData.openId = that.$store.state.openId
						
						
						
						that.submit()
						
					}
				})
				
			},
			setS(){
				this.s--;
				
				if(this.s>0){
					setTimeout(this.setS,1000);
				}
			},
			onGet_code(){
				var that=this;
				
				if(this.formData.u_tel==''){
					return this.$refs.uToast.show({
						title: '请输入手机号码'
					});
				}
				
				this.$request({
					url:'/sendtel/index',
					data:{phone:this.formData.u_tel,type:1},
					success(res){
						if(res.data.code==1){
							that.s=60;
							that.setS();
							
							that.$refs.uToast.show({
								title: '发送成功',
								type: 'success'
							});
						}else{
							that.$refs.uToast.show({
								title: res.data.msg,
								type: 'error'
							})
						}
					},fail(){
						that.$refs.uToast.show({
							title: '网络繁忙',
							type: 'warning'
						})
					}
				})
			},
			submit() {
				
				let that = this
				
				// let toast1=that.$refs.uToast.show({
				// 	title: '提交中...',
				// 	type: 'default',
				// 	icon:true,
				// 	duration:0
				// })
				
				this.$refs.uForm.validate(valid => {
					if (valid) {
						
						console.log('ok')
						
						this.$request({
							url:'/Register',
							data:that.formData,
							method:'post',
							success(res){
								console.log()
								if(res.data.code==1){
									
									that.$refs.uToast.show({
										title: '注册成功',
										type: 'success',
										url: '/pages/login/login'
									})
									
								}else{
									that.$refs.uToast.show({
										title: res.data.msg,
										type: 'warning'
									})
								}
							},
							fail(err){
								that.$refs.uToast.show({
									title:'提交失败~',
									type: 'warning'
								})
							},
							complete(){
								// toast1.clear()
							}
						})
						
					} else {
						console.log('验证失败');
					}
				});
			}
		},
		onReady() {
			
			/*
			 uni.removeStorage({
			     key: 'storage_key',
			     success: function (res) {
			         console.log('success');
			     }
			 })
			 */
			
			this.$refs.uForm.setRules(this.rules)
			
			uni.getStorage({
			    key: 'user_sex',
			    success: function (res) {
			        this.formData.u_sex = res.data
			    }
			})
			
		}
	}
</script>

<style>
	.form_box{
		width: 750rpx;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		margin-top: 20rpx;
	}
	.form_box .form_item{
		min-height: 100rpx;
		/* border-bottom: 1px solid #EFEFEF; */
	}
	.form_box .form_item .u-form-item--left__content__label{
		text-align: center;
	}
	/* .form_box .form_item .form_label{
		width: 200rpx;
		text-align: center;
		font-size: 28rpx;
	} */
	.form_box .form_item .form_input{
		width: 530rpx;
		display: flex;
		align-items: center;
	}
	.form_box .form_item .form_input input{
		/* width: 490rpx; */
		color:#888;
		font-size: 28rpx;
		flex:1;
	}
	.form_box .form_item .form_input .butt{
		flex:1;
		background-color: #EA4389;
		color:#fff;
		height: 70rpx;
		border-radius: 100rpx;
		text-align: center;
		line-height: 70rpx;
		margin-left: 20rpx;
	}
</style>
